<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
            overflow: hidden;
            font-size: 12px;
            padding: 0;
            margin: 0;
        }

        .cloud-promote-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
            opacity: .9;
        }

        .cloud-promote-bar-right {
            display: flex;
            flex-direction: row;
            gap: 8px;
        }

        .cloud-promote-bar-right span {
            display: inline-flex;
            align-items: center;
            padding: 3px 2px;
            /* border-style: solid;
            border-width: 1px;
            border-radius: 4px; */
            position: relative;
            margin-right: 0;
            /* margin-right: 5px; */
            cursor: pointer;
            text-decoration: underline;
        }

        .cloud-promote-bar-right span img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
    </style>
    <!-- <script>
        const urlParams = new URLSearchParams(window.location.search);
        const color = urlParams.get('color');
        console.log(window.location);
        document.write(`
            <style>
                body {
                    color: ${color};
                }
            </style>
        `)
    </script> -->
    <script>
        window.addEventListener('message', (event) => {
            if (event.data.action === 'init') {
                const color = event.data.payload.color;
                const cloudData = event.data.payload.cloud;
                const style = document.createElement('style');
                style.innerHTML = `
                    body {
                        color: ${color};
                    }
                `
                document.head.appendChild(style);

                const promoteItemTemplate = function (item) {
                    return `<span key="${item.name}" style="border-color: ${item.color}" onclick="window.uxpHost.postMessage({action: 'open', payload: {url: '${item.url}'}})">
                        <img src="${item.icon}" onerror="this.style.display = 'none'" />${item.name}
                    </span>
                    `
                }
                const cloudPromoteBarRight = document.getElementById('cloud-promote-bar-right');
                cloudPromoteBarRight.innerHTML = cloudData.map(promoteItemTemplate).join('');
            }
        });
    </script>
</head>

<body>
    <div class="cloud-promote-bar">
        <span class="cloud-promote-bar-left">云端推荐</span>
        <span class="cloud-promote-bar-right" id="cloud-promote-bar-right">

        </span>
    </div>

</body>

</html>